<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、是什么</h2>
  <div>BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素</div>
  <h2>二、触发条件</h2>
  <div>触发BFC的条件包含不限于：</div>
  <ul>
    <li>根元素，即HTML元素</li>
    <li>浮动元素：float值为left、right</li>
    <li>overflow值不为 visible，为 auto、scroll、hidden</li>
    <li>display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid</li>
    <li>position的值为absolute或fixed</li>
  </ul>
  <h2>三、应用场景</h2>
  <div>防止margin重叠（塌陷）：同一个BFC的俩个相邻的盒子的margin会发生重叠

    可以在p外面包裹一层容器（  overflow: hidden;// 新的BFC ），并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠</div>
    <br>
    <div>清除内部浮动：而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生活才能BFC，则内部浮动元素计算高度时候也会计算（父级盒子没有被浮动元素撑开，给父级盒子触发BFC）</div>
  <br>
  <div>自适应多栏布局:BFC的区域不会与浮动盒子重叠</div>
  <h2>小结</h2>
  <div>可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素</div>
</body>
</html>